Building a fly-out menu with Fireworks MX and Dreamweaver MX Tutorial

Before you create your flyout menu, your navigation should already be created, i.e., the section names and subsection (page) names should be determined. It is also advised that colors and fonts be determined beforehand as well. Here is my outline for my sample navigation:

• About Us
  • Our History
  • Mission Statement
• Services
  • Products
  • Repairs
• Privacy Statement
• Contact Us
  • Email
  • Snail Mail
  • Location and Directions

In Fireworks, create your menus. Make the canvas as long and as wide as you need for the total. I am going to use a "standard" navigation width such as 175 px and to make the canvas height equal to each shape height times the number of shapes, plus 2 pixels space around each. You many need to play with the width to accomodate larger or smaller links. I have checked the width of the longest link, and it fits nicely with Tahoma font 14 pt.

My example menu now contains four 175 px wide and 40 px tall rectangles. Notice I have added 4 pixels to width of my canvas and aligned all the rectangles at x=2 and the top one at y=2. Also, I have added 10 pixels to the height for a 2 pixel space around the four rectangles.

For each rectangle, click on the shape and from the file menu, select Modify/Symbol/Convert to Symbol and then Button (or r-click and select Convert to Symbol, or press F8). Enter a meaningful name, such as aboutbtn. The rectangle will now be highlighted and identified as a button.

Double-click the arrow to open up the button editor. In the first tab (Up), add your text. I am going to center my text, so I used the Modify/Align from the file menu to center the text with the rectangle.

Click on the Over tab and create the button for the hover state. I selected the "Copy Up Graphic" and added an underline to my text. Repeat for the Down tab. I selected the "Copy Over Graphic" for the down state and didn't make any changes. Click the Done button to close the editor. Click on the button and enter the Alt text and link (if there is one) in the properties panel. Since my About Us is only a section name, not a page name, I an not creating a link for this button.

Now that you have finished creating the buttons, it is time to create the fly-out menus. From the file menu, select Window/Behaviors to open the Behaviors window. Click on one of the buttons (now also referred to as a "slice" or "hotspot" in Fireworks), then the "+" sign in the Behaviors window, and select "Set Pop-up Menu." The Pop-up Menu editor will open for this button.

On the Content tab, fill in the Text, Link, and, if necessary, the Target. For my About Us button, I have entered the text and links.

Note: If you plan on using subdirectories for your site, enter your links as absolute paths rather than relative, otherwise they will not link properly from the pages in the subdirectories.

Click on the Appearance tab. The Editor has defaults already in place, which can, of course, be modified. These are the default settings for my About Us pop-up menu:

I made changes so the pop-up menu will look like the other buttons and replaced the font name "Verdana" with "Tahoma" right in the drop down text box. Now the Mission Statement text doesn't fit on one line, but that will be fixed on the Advanced tab.

Click on the Advanced tab. Defaults are in place for this tab too.

For the example pop-up menu, I prefer to keep the cell widths the same as the original buttons, but want a smaller height. Since the text is centered and the height larger than the font, I set the cell padding to 0. Menu delay is the length of time (in milliseconds) that the menu will continue to display once the user has taken their mouse away. I left the default for the menu delay, as well as for the borders.

Click on the position tab and click on the preferred menu icon. I selected the most-right icon to set the menu position to top-right of each button. Since I have no submenus, that selection area is greyed-out.

Press F12 to preview your pop-up menu before continuing with the others. After previewing, I changed the border color and shadow to white so it would match the parent menu.

After making any changes, repeat this process for the remaining buttons that have a pop-up menu. Most, if not all, of the settings in your first menu will be the defaults for the remaining menus.

The next step is to export the menu as an htm file. The process of exporting will also generate the necessary underlying javascript. From the file menu, select File/Export. If necessary, change the settings so that the Save as Type is HTML and Images, HTML is Export HTML file, Slices are Export Slices, Include areas without slices, and Put images in subfolder (create one if necessary).

Click on the Options... button and make the export settings to your liking. Make sure the file is being saved in the same folder as your other files and click the Save button.

Open up Dreamweaver. You will notice 2 new files in your directory, the fireworks file with an htm extension and a javascript file mm_menu.js. Open the new file, and you will see your menu in a table.

To import the menu, open the file you you need the menu placed in, and creat a table data cell the same width as your canvas where you want the menu to go. In design view, click inside the table cell and from the Common toolbar, select Fireworks HTML from the Image dropdown. Browse to the file location and select Open; select OK to import (importing may take a moment).

Once your table is imported, press F12 to preview and make sure everything is working!

Click here to see the sample page. If you have any questions, please email me!